<template>
  <section class="item">
    <div v-if="menuContent">
      <ul class="content" v-for="content of menuContent" :key="content.id" >
        <li v-for="item of content" :key="item.id" @click="clickImg(item.id)">
          <img v-lazy="item.imgUrl" alt=""/>
          <p>{{item.name}}</p>
          <span>{{item.ename}}</span>
        </li>
      </ul>
    </div>
    <div v-else class="not">暂无此类商品，谢谢关注！</div>
  </section>
</template>

<script>
export default {
  name: 'Content',
  props: ['classifyId'],
  data () {
    return {
      menuContent: [],
      guj: false,
      menuContentSon: {}
    }
  },
  created () {
    this.getMenuItem(this.$route.params.id)
  },
  watch: { // 监听
    classifyId () {
      if (this.classifyId >= 0) {
        console.log('局部刷新')
        this.$route.params.id = this.classifyId // 点击分类传过来的id 当点击的时候首页的params.id跟着改变
        this.getMenuNum(this.$route.params.id)
      }
    }
  },
  methods: {
    getMenuItem (id) {
      this.axios.get('/menuItem/' + id)
        .then((res) => {
          // console.log(res)
          let data = res.data
          // console.log(data)
          this.menuContent = data
        })
    },
    getMenuNum (classifyId) {
      this.axios.get('/menuItem/' + classifyId)
        .then((res) => {
          // console.log(res)
          let data = res.data
          this.menuContent = data
        })
    },
    clickImg (id) {
      this.guj = true
      this.axios.get('/menuItem/' + this.$route.params.id)
        .then((res) => {
          // console.log(res)
          let data = res.data
          console.log(data)
          for (let i in data) {
            for (let j in data[i]) {
              // console.log(data[i][j])
              if (j == id) { // ===全等不可以
                console.log(data[i][id])
                this.menuContentSon = data[i][id]
                this.$emit('transferData', this.menuContentSon)
              }
            }
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .not
    margin-top 330px
    font-size 33px
    color #9e9e9e
    text-align center
  .content
    margin-top 290px
    background #fff
    display flex
    flex-wrap wrap
    align-content stretch
    flex-direction row
    box-sizing border-box
    padding 15px 20px 150px 20px
    width 100%
    li
      width 49%
      border 1px solid #f2f2f2
      text-align center
      overflow hidden
      box-sizing border-box
      margin-bottom 2%
      padding 20px 0 40px
      img
        width 99%
      p
        font-size 32px
        color #5C5C5C
        margin 20px 10px
      span
        font-size 15px
        color #bababa
        display block
        margin-top -10px
    li:nth-child(odd)
      margin-right 2%
  .content:nth-child(2)
    display none
</style>
